<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="邵铭">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
            padding: 0;
            background-image: url('beijing.jpg');
          overflow: hidden;
        }
        
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 600px;
            margin: auto;
            color: white;
            font-size: 70px;
        }
        
        h3 {
            font-weight: normal;
            text-align: center;
        }
        
        p {
            display: inline-block;
            position: absolute;
            left: 30%;
            top: 45%;
            /*left: 100px;*/
            top: 450px;
            color: #fff;
            font-size: 80px;
            z-index: 2;
            text-shadow: 0 0 10px #1939fd;
            transition: all 1s linear;
        }
        
        p:nth-child(2) {
            left: 52%;
            /*right: 600px;*/
        }
        
        img {
            width: 600px;
            height: 600px;
            animation: xz 6s linear infinite;
        }
        
        @keyframes xz {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        img:active {
            animation: none;
        }
        main{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .list {
            margin: 0;
            padding: 0;
            list-style: none;
            /*width: 600px;*/
            margin: auto;
            /*color: white;*/
            font-size: 20px;
            position: absolute;
           
        }
        .second{
            right: -400px;
            
        }
        /*.second li{
            text-align: right;
        }*/
        
        a {
            text-decoration: none;
            display: inline-block;
            /*font-size: 25px;*/
            margin: 10px;
            color: #E6FFFF;
            padding: 5px;
            border-radius: 5px;
            /*background-color: #DEB7CA;*/
            font-weight: bold;
        }
        
        a:hover {
            padding: 10px;
        }
    </style>
</head>

<body>
    <main>
        <ul class="list">
            <li><a href="./简易日历.html">简易日历</a></li>
            <li><a href="./简易选项卡.html">简易选项卡</a></li>
            <li><a href="./百度新闻/百度新闻.html">百度新闻</a></li>
            <li><a href="./京东轮播图/京东轮播图.html">京东轮播图</a></li>
            <li><a href="./千图网/千图网.html">千图网</a></li>
            <li><a href="./元素切换/index.html">元素切换</a></li>
            <li><a href="./优酷/index.html">优酷</a></li>
            <li><a href="./倒计时作业.html">倒计时</a></li>
            <li><a href="./唯品会/index.html">唯品会</a></li>
            <li><a href="./作业/01.html">jQuery1</a></li>
            <li><a href="./作业/02.html">jQuery2</a></li>
            <li><a href="./遮罩层/遮罩层.html">遮罩层</a></li>
            <li><a href="./jq京东轮播图/jq京东.html">jq京东轮播图</a></li>

        </ul>
        <ul class="list second">
             <li><a href="./jq星级评分/jq五星好评.html">jq星级评分</a></li>
            <li><a href="./jq动画练习/jq专辑动画.html">jq动画练习</a></li>
           <li><a href="./jq微博字数限制/jq微博字数.html">jq微博字数限制</a></li>
           <li><a href="./小米/index.html">小米官网 </a></li>
           <li><a href="./考试/index.html">考试 </a></li>
        </ul>
        <ul>
            <li>
                <h3>个人首页</h3>
                <p>加油少年</p>
                <p>为了梦想</p>
                <img src="xing.png" alt="">
            </li>
        </ul>
    </main>
</body>

</html>